<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    
    <title>搜藏</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	<script type="text/javascript">
	function add(){
		window.open ('favEdit.html', 'newwindow',
		'height=300, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
	}
	</script>
  </head>
  <body>
    <form name="favForm" method="post" action="/cang/fav.do;jsessionid=FF8C0487A99814B144B07E5633524A0F">
      <input type="hidden" name="op" value="toList" />
    
    <div class="banner" valign="top">
    	 搜藏
    </div>
      
	<table id="app" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td style="text-align:right;" valign="top">
			<!-- 左边Tag列表 -->
				<div class="left_labels" >

				<table class="labels_table" cellspacing="0" cellpadding="0" border="0">
					<tr><td><a href="#" onclick="add();" style="font-weight:bold;">添加书签</a></td></tr>
					<tr>
						<td :class="{selected_label : selected == 'all'}">
							<a href="#" @click.prevent="showAll()">全部</a>
						</td>
					</tr>
					<tr>
						<td :class="{selected_label : selected == 'notTags'}">
							<a href="#" @click.prevent="showNotTags()">未分类</a>
						</td>
					</tr>

					<tr v-for="t in tagList">
						<td :class="{selected_label : selected == t.tid}">
							<a href="#" @click.prevent="showFov(t)">{{t.tname}}</a>
						</td>
					</tr>

					<tr>
						<td>
							<a style="color:green;font-size:16px;" href="#" @click.prevent="showYun">云图</a>
						</td>
					</tr>
				</table>
				</div>
			</td>
			<td>
			<!-- 右边fav内容 -->
				<div class="content_links">
					<div v-if="selected == null">
						<label v-for="t in tagList" style="margin:10px;color:black;"
							   :style="{fontSize:14 + t.tcount + 'px',fontWeight:300 + t.tcount * 100}">
							{{t.tname}}
						</label>
					</div>

					<div v-if="selected != null" v-for="f in clickTag.fList" style="padding:6px 10px;">
						<div>
							<a :href="'http://'+f.furl" style="color:blue;font-size: 18px;" target="_blank">
								{{f.flabel}}
							</a>
						</div>
						<div style="color:black;font-size: 16px;">
							{{f.fdesc}}
						</div>
						<div style="color: green;font-size: 14px">
							http://{{f.furl}}
						</div>
					</div>

<!--					<div v-if="selected == null">-->
<!--						<span v-for="t in tagList" style="margin:10px">-->
<!--							{{t.tname}}-->
<!--						</span>-->
<!--					</div>-->
				</div>
			</td>
		</tr>
	</table> 
	
    </form>
  <script type="text/javascript">
	  var v = new Vue({
		 el: '#app',
		 data:{
			 tagList:[],
			 clickTag:{fList:[]},
			 selected:'all'
		 },
		 created(){
			 axios.get("allTag.s").then(res=>{
				 this.tagList = res.data;
				 this.showAll();
			 });
		 },
		  methods:{
			  showFov(tag){
				  this.selected = tag.tid;
				  this.clickTag = tag;
			  },
			  showAll(){
				  this.selected = 'all';
				  this.clickTag = {fList:[]};
				  for(tag of this.tagList){
					  a:for(fov of tag.fList){
						  for (fov1 of this.clickTag.fList){
							  if(fov1.fid == fov.fid){
								  continue a;
							  }
						  }
						  this.clickTag.fList.push(fov)
					  }
				  }
			  },
			  showNotTags(){
				  this.selected = 'notTags';
				  this.clickTag = {fList:[]};
				  for(tag of this.tagList){
					  a:for(fov of tag.fList){
						  if(fov1.fid == fov.fid){
							  continue a;
						  }
						  if (!fov.ftags){
							  this.clickTag.fList.push(fov);
						  }
					  }
				  }
			  },
			  showYun(){
				  this.selected = null;
			  }
		  }
	  });
  </script>
  </body>
</html>